@charset 'utf-8';

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

body{
    width: 100%;
    height: 100%;
    background:url(../img/bg_back.jpg) no-repeat;
    background-size: 100%;
    position: relative;
}

.circle{
    height: vw(800);
    overflow: hidden;
    position: relative;
    ul{
        width: 99999px;
        li{
            float: left;
            width: vw(640);
            img{
                width: 100%;
            }
        }
        .open{
            position: absolute;
            top: vw(590);
            left: 0;
            float: none;
        }
    }
}
.end{
        width: vw(640);
        position: absolute;
        top: vw(590);
        left: 0;
        z-index: -100;
        display: none;
        img{
            width: 100%;
            height: 100%;
        }
    }

.grade{
    width: vw(640);
    display: none;
    background: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    img{
        width: vw(555);
        height: vw(348);
        margin-top: vw(220);
        margin-left: vw(42);
    }
    .p1{
        font-size: vw(50);
        color: rgb(226,227,10);
        position: absolute;
        top: vw(400);
        left: vw(130);
        font-weight: 600;
    }
    .p2{
        font-size: vw(50);
        color: rgb(226,227,10);
        position: absolute;
        top: vw(400);
        right: vw(130);
        font-weight: 600;
    }
    .again{
        width: vw(227);
        height: vw(65);
        box-sizing: border-box;
        background: transparent;
        border: vw(2) solid #f4e398;;
        text-align: center;
        margin-left: vw(85);
        line-height: vw(65);
        font-size: vw(34);
        color: #f4e398;
        margin-top: vw(238);
    }
    .lotto{
        width: vw(227);
        height: vw(65);
        box-sizing: border-box;
        background: #F4E398;
        text-align: center;
        margin-right: vw(85);
        line-height: vw(65);
        color: #a20500;
        font-size: vw(34);
        margin-top: vw(238);
    }
}

.bearFly{
    width: vw(250);
    height: vw(185);
    position: absolute;
    top: vw(590);
    left: vw(0);
    img{
        width: 100%;
        height: 100%;
    }
}

.loading{
    width: vw(514);
    height: vw(42);
    position: relative;
    margin-left: vw(64);
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .nengliang{
        width: vw(514);
        height: vw(34);
        margin-top: vw(4);
        position: absolute;
        top: 0;
        left:vw(-514);
        img{
            width: 100%;
            height: 100%;
        }
    }
}


.start{
    transition: all 1000ms;
}
